<template>
  <div class="home">
    <Header></Header>
    <div class="content clearfix">
      <Banner></Banner>
      <div class="index-box-list clearfix">
        <div class="index-box">
          <h3 class="index-box-h">网站动态</h3>
          <div class="index-box-con">
            <ul>
              <li class="overflow-ellipsis" v-for="(news,index) in NewsList" v-if="index<5">
                <router-link :to="'/news/'+news.id" tag="a" v-text="news.title"></router-link>
              </li>
            </ul>
          </div>
        </div>
        <div class="index-box">
          <h3 class="index-box-h">产品中心</h3>
          <div class="index-box-con">
            <ul>
              <li class="overflow-ellipsis" v-for="(product,index) in ProductsList" v-if="index<5">
                <router-link :to="'/product/'+product.id" tag="a" v-text="product.gameName"></router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from './fragment/Header.vue'
import Banner from './fragment/Banner.vue'
import Footer from './fragment/Footer.vue'
import { NewsList, ProductsList} from '../assets/js/data.js'


export default {
  name: 'Home',
  components: { Header, Banner, Footer },
  mounted() {},
  data() {
    return {
      NewsList: NewsList,
      ProductsList: ProductsList,
    }
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
